import React, { Component } from 'react';
import car from '../../state/shopcar.gif'
import './car.scss'
import { shopcart_list, shopcart_sub, shopcart_add, shopcart_clear } from '../../utils/api'
class Car extends Component {
    constructor(props) {
        super(props);
        this.state = {
            shopcart: [],
            num: '',
            price: '',
            blean: ''
        }
    }
    componentDidMount() {
        var id = localStorage.getItem("userid")
        shopcart_list({ userid: id }).then((res) => {
            var a = '' / 1
            var b = '' / 1
            res.data.list.forEach((item) => {
                a += item.count
                b += item.count * item.salesPrice.value
            })
            this.setState({
                shopcart: res.data.list,
                num: a,
                price: b
            })
            console.log(res.data.list)
        })
    }
    render() {
        return (
            <div>
                <div className="carhead">
                    <p>购物车({this.state.shopcart.length})</p>
                </div>
                {
                    this.state.shopcart.length == 0 ?
                        <div className="carcount">
                            <img src={car} alt="" />
                        </div> :
                        <div>
                            {
                                this.state.shopcart.map((item, index) => {
                                    return <div className="cargood" key={index}>
                                        <input type="checkbox" name='one' onClick={this.oncheck} />
                                        <div className="imgs">
                                            <img src={item.pic} alt="" />
                                        </div>
                                        <div className="cargoodname">
                                            <p className='goodtitle'>{item.name}</p>
                                            <div className="m_price">
                                                <p key={index}>￥<span>{item.salesPrice.value}</span></p>
                                                <div className="name">
                                                    <span className='liwai' onClick={() => this.carsub(item.id)}>-</span>
                                                    <span>{item.count}</span>
                                                    <span onClick={() => this.cartadd(item.id)}>+</span>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                })
                            }
                            <div className="food">
                                <div className="allcheck">
                                    <input type="checkbox" id='all' onClick={this.allcheck} />
                                    <span>全选</span>
                                </div>
                                <div className="jiesuan">
                                    <p>总价：<span>￥</span><span className='money'>{this.state.price}</span></p>
                                    <p className='pay' onClick={this.clear}>去结算({this.state.num})</p>
                                </div>
                            </div>
                        </div>
                }
            </div>
        );
    }
    oncheck() {
        var chOne = document.getElementsByName("one");
        var flag = true;
        for (var i = 0; i < chOne.length; i++) {
            if (!chOne[i].checked) {
                document.getElementById("all").checked = false;//将all的按钮显示去掉
                flag = false;
                break;
            }
            if (flag) {
                document.getElementById("all").checked = true;
            }
        }
    }
    allcheck = (e) => {
        var v = e.target.checked
        var chOne = document.getElementsByName("one");
        if (e.target.checked) {
            for (var i = 0; i < chOne.length; i++) {
                chOne[i].checked = v;
            }
        } else {
            for (var i = 0; i < chOne.length; i++) {
                chOne[i].checked = v;
            }
        }
    }
    carsub(itemid) {
        var id = localStorage.getItem('userid')
        shopcart_sub({ userid: id, goodid: itemid }).then((res) => {
            var id = localStorage.getItem("userid")
            shopcart_list({ userid: id }).then((res) => {
                var a = '' / 1
                var b = '' / 1
                res.data.list.forEach((item) => {
                    a += item.count
                    b += item.count * item.salesPrice.value

                })
                this.setState({
                    shopcart: res.data.list,
                    num: a,
                    price: b
                })
            })
        })
    }
    cartadd(itemid) {
        var id = localStorage.getItem('userid')
        shopcart_add({ userid: id, goodid: itemid }).then((res) => {
            var id = localStorage.getItem("userid")
            shopcart_list({ userid: id }).then((res) => {
                var a = '' / 1
                var b = '' / 1
                res.data.list.forEach((item) => {
                    a += item.count
                    b += item.count * item.salesPrice.value
                })
                this.setState({
                    shopcart: res.data.list,
                    num: a,
                    price: b
                })
            })
        })
    }
    clear = () => {
        var id = localStorage.getItem('userid')
        shopcart_clear({ userid: id }).then((res) => {
            console.log(res.data)
        }
        )
    }
}

export default Car;